<template>
  <div class="certificateBusinessAdd">
    <div style="padding: 10px 10px 0 0;">
      <Form ref="riskPointDataForm" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <FormItem label="运输企业" prop="deptUuid">
          <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="维护制度照片">
          <Upload :before-upload="dailyMaintenanceImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传维护制度照片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!dailyMaintenanceImg.url?dailyMaintenanceImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="车辆维护制度" prop="dailyMaintenanceContent">
          <tinymce :htmlData="formData.dailyMaintenanceContent" :height="350" @tinymceData="val => formData.dailyMaintenanceContent = val"></tinymce>
        </FormItem>
        <FormItem label="档案制度照片">
          <Upload :before-upload="dailyTechnicalImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传档案制度照片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!dailyTechnicalImg.url?dailyTechnicalImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="技术档案制度" prop="dailyTechnicalContent">
          <tinymce :htmlData="formData.dailyTechnicalContent" :height="350" @tinymceData="val => formData.dailyTechnicalContent = val"></tinymce>
        </FormItem>
        <FormItem label="聘用制度照片">
          <Upload :before-upload="dailyEmploymentImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传聘用制度照片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!dailyEmploymentImg.url?dailyEmploymentImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="人员聘用制度" prop="dailyEmploymentContent">
          <tinymce :htmlData="formData.dailyEmploymentContent" :height="350" @tinymceData="val => formData.dailyEmploymentContent = val"></tinymce>
        </FormItem>
        <FormItem label="例会制度照片">
          <Upload :before-upload="dailyMeetingImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传例会制度照片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!dailyMeetingImg.url?dailyMeetingImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="安全例会制度" prop="dailyMeetingContent">
          <tinymce :htmlData="formData.dailyMeetingContent" :height="350" @tinymceData="val => formData.dailyMeetingContent = val"></tinymce>
        </FormItem>
        <FormItem label="培训制度照片">
          <Upload :before-upload="dailyEducateImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传培训制度</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!dailyEducateImg.url?dailyEducateImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="教育培训制度" prop="dailyEducateContent">
          <tinymce :htmlData="formData.dailyEducateContent" :height="350" @tinymceData="val => formData.dailyEducateContent = val"></tinymce>
        </FormItem>
        <FormItem label="报告制度照片">
          <Upload :before-upload="dailyAccidentImgFun" action="" style="color: #2d8cf0;cursor: pointer;">上传报告制度照片</Upload>
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%;">
              <img :src="!!dailyAccidentImg.url?dailyAccidentImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </FormItem>
        <FormItem label="事故报告制度" prop="dailyAccidentContent">
          <tinymce :htmlData="formData.dailyAccidentContent" :height="350" @tinymceData="val => formData.dailyAccidentContent = val"></tinymce>
        </FormItem>

      </Form>
    </div>


    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button type="primary" @click="addSubmit('riskPointDataForm')">提交</Button>
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
    </div>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>


import tinymce from "../../../components/table/tinymce";
export default {
  components: {
    tinymce,
  },
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      uploadProgress: 0,//文件上传进度
      riskCheckPhaseList: [],
      spinShow: false,//本页加载
      ruleValidate: {//正则
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],
        certificateNo: [
          {required: true, message: '请填写统一信用代码', trigger: 'blur'}
        ],
        certificateLegal: [
          {required: true, message: '请填写法人代表', trigger: 'blur'}
        ],
        certificateFoundDate: [
          {type:'date',required: true, message: '请选择建立日期', trigger: 'blur'}
        ],
        certificateDueDate: [
          {type:'date',required: true, message: '请选择截至日期', trigger: 'blur'}
        ],
        certificateAddress: [
          {required: true, message: '请填写营业地址', trigger: 'blur'}
        ],
      },
      subDeptList: [],//运输企业
      formData: {
        deptUuid:'',
      },

      dailyMaintenanceImg: {data: null,url: ''},//车辆维护制度图片
      dailyTechnicalImg: {data: null,url: ''},//技术档案制度图片
      dailyEmploymentImg: {data: null,url: ''},//人员聘用制度图片
      dailyMeetingImg: {data: null,url: ''},//安全例会制度图片
      dailyEducateImg: {data: null,url: ''},//教育培训制度图片
      dailyAccidentImg: {data: null,url: ''},//事故报告制度图片

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    if (!!that.selectData.id) {

      that.formData = that.selectData;
      //车辆维护制度图片
      that.dailyMaintenanceImg = {
        data: null,
        url: !!that.formData.dailyMaintenanceImg ? that.apiUrl.imgUrl + that.formData.dailyMaintenanceImg : ''
      };
      //技术档案制度图片
      that.dailyTechnicalImg = {
        data: null,
        url: !!that.formData.dailyTechnicalImg ? that.apiUrl.imgUrl + that.formData.dailyTechnicalImg : ''
      };
      //人员聘用制度图片
      that.dailyEmploymentImg = {
        data: null,
        url: !!that.formData.dailyEmploymentImg ? that.apiUrl.imgUrl + that.formData.dailyEmploymentImg : ''
      };
      //安全例会制度图片
      that.dailyMeetingImg = {
        data: null,
        url: !!that.formData.dailyMeetingImg ? that.apiUrl.imgUrl + that.formData.dailyMeetingImg : ''
      };
      //教育培训制度图片
      that.dailyEducateImg = {
        data: null,
        url: !!that.formData.dailyEducateImg ? that.apiUrl.imgUrl + that.formData.dailyEducateImg : ''
      };
      //事故报告制度图片
      that.dailyAccidentImg = {
        data: null,
        url: !!that.formData.dailyAccidentImg ? that.apiUrl.imgUrl + that.formData.dailyAccidentImg : ''
      };

    }

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
        if (!that.selectData.id) {
          that.formData.deptUuid = that.subDeptList[0].uuid;
        }
      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    dailyMaintenanceImgFun(file) {//车辆维护制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.dailyMaintenanceImg.url = window.URL.createObjectURL(file);
        that.dailyMaintenanceImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    dailyTechnicalImgFun(file) {//技术档案制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.dailyTechnicalImg.url = window.URL.createObjectURL(file);
        that.dailyTechnicalImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    dailyEmploymentImgFun(file) {//人员聘用制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.dailyEmploymentImg.url = window.URL.createObjectURL(file);
        that.dailyEmploymentImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    dailyMeetingImgFun(file) {//安全例会制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.dailyMeetingImg.url = window.URL.createObjectURL(file);
        that.dailyMeetingImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    dailyEducateImgFun(file) {//教育培训制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.dailyEducateImg.url = window.URL.createObjectURL(file);
        that.dailyEducateImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    dailyAccidentImgFun(file) {//事故报告制度图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        that.dailyAccidentImg.url = window.URL.createObjectURL(file);
        that.dailyAccidentImg.data = file;
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },

    //提交表单
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        if (valid) {//正则判断使上传



          var data = JSON.parse(JSON.stringify(that.formData));
          let formData = new FormData();
          delete data.updateTime;
          delete data.createTime;
          delete data.dailyMaintenanceImg;
          delete data.dailyMaintenanceImgFile;
          delete data.dailyTechnicalImg;
          delete data.dailyTechnicalImgFile;
          delete data.dailyEmploymentImg;
          delete data.dailyEmploymentImgFile;
          delete data.dailyMeetingImg;
          delete data.dailyMeetingImgFile;
          delete data.dailyEducateImg;
          delete data.dailyEducateImgFile;
          delete data.dailyAccidentImg;
          delete data.dailyAccidentImgFile;


          for (let key in data) {
            formData.append(key, data[key]);
          }

          //车辆维护制度图片
          if (!!that.dailyMaintenanceImg.data) {//选择了图片
            formData.append('dailyMaintenanceImgFile', that.dailyMaintenanceImg.data);
          }
          //技术档案制度图片
          if (!!that.dailyTechnicalImg.data) {//选择了图片
            formData.append('dailyTechnicalImgFile', that.dailyTechnicalImg.data);
          }
          //人员聘用制度图片
          if (!!that.dailyEmploymentImg.data) {//选择了图片
            formData.append('dailyEmploymentImgFile', that.dailyEmploymentImg.data);
          }
          //安全例会制度图片
          if (!!that.dailyMeetingImg.data) {//选择了图片
            formData.append('dailyMeetingImgFile', that.dailyMeetingImg.data);
          }
          //教育培训制度图片
          if (!!that.dailyEducateImg.data) {//选择了图片
            formData.append('dailyEducateImgFile', that.dailyEducateImg.data);
          }
          //事故报告制度图片
          if (!!that.dailyAccidentImg.data) {//选择了图片
            formData.append('dailyAccidentImgFile', that.dailyAccidentImg.data);
          }

          that.axios.post(that.apiUrl.webApi + "/safety/deptSystem/deptSystemDailySaveOrUpdate", formData, that.public.parameterUploadProgress(that)).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        }else {
          that.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
.certificateBusinessAdd {
  overflow: auto;
  height: 100%;

  .demo-upload-list {
    display: inline-block;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    margin-right: 4px;

    img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);

      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
}

.ql-container{
  height: 150px;
}
</style>
